<template>
  <div class="card">
    <div class="card-header">沟通记录</div>
    <div
      v-for="reply in feedback.contents"
      :key="reply.timestamp"
      class="padding border-bottom"
    >
      <template v-if="reply.role === 'admin'">
        <el-avatar src="https://vue.learnerhub.net/logo.jpg" class="s30 float-left" />
        <div class="p-x-46" style="line-height: 30px;">
          知士荟工程师
          <timeago2 :date-time="reply.timestamp" timeago="none" class="float-right" />
        </div>
      </template>
      <template v-else>
        <el-avatar :src="feedback.userAvatar" class="s30 float-left" />
        <div class="p-x-46" style="line-height: 30px;">
          {{ feedback.userNickname }}
          <timeago2 :date-time="reply.timestamp" timeago="none" class="float-right" />
        </div>
      </template>
      <ckeditor :initial-content="reply.content" class="p-x-46" readonly />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'communication-record', // 沟通记录
  computed: {
    ...mapState({ feedback: 'currentFeedback' }),
  },
};
</script>

<style></style>
